import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Row, Col, Table, Button, Badge, Space, Typography, Drawer } from 'antd';
import { FieldTimeOutlined,PlusOutlined } from '@ant-design/icons';
import IconFont from '@/components/Iconfont';
import ServiceConfig from './ServiceConfig';
import { connect } from 'umi';
import moment from "moment"

interface IPayServModel {
    id: number;
    serviceName: string;
    creationTime: string;
    ip: string;
    port: number;
    areas: string;
    runningtime: number;
    downtime: number;
    isEnable: boolean;
    status: number;
}
interface MyStatusProps {
    text?: string;
    status: number;
}

const { Text } = Typography;
type stype = "success" | "error" | "default" | "processing" | "warning" | undefined;
const statusArr: string[] = ['success', 'error', 'default', 'processing', 'warning'];
const statusTxtArr: string[] = ['成功', '异常', '未启动', '运行中', '警告'];
const StatusTag = (props: MyStatusProps) => {
    var abc = props.status ? props.status : 2;
    return (
        <Badge status={statusArr[abc] as stype} text={statusTxtArr[abc]} />
    )
}

class PayService extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
        this.state = {
            selectedRowKeys: [],
            loading: false,
            visible: false,
            record: {},
            dataSource: [],
        };
    }

    componentDidMount() {
        this.fetchData();
    }

    fetchData = () => {
        this.setState({ loading: true });
        this.props.dispatch({
            type: 'Abp/getAll',
            payload: { SkipCount: 0, MaxResultCount: 100 },
            control: 'PayService',
        }).then(() => {
            var resp = this.props.response.result.items;
            this.setState({
                selectedRowKeys: [],
                dataSource: resp,
                loading: false,
            });
        });
    };

    onSelectChange = (selectedRowKeys: any) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };
    showDrawer = (record?: IPayServModel) => {
        this.setState({ visible: true, record });
    };
    onClose = () => {
        this.setState({ visible: false, loading: false });
    };
    render() {
        const { loading, selectedRowKeys, record } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        const columns = [
            {
                title: '服务器名',
                dataIndex: 'serviceName',
            render: (text: any, record: IPayServModel) => <span><IconFont type="icon-server" /> {record.areas}-{text}</span>
            },
            {
                title: '地址',
                dataIndex: 'ip',
                render: (text: any, record: IPayServModel) => <span> <Text strong>{record.ip}</Text>: {record.port} </span>
            },
            {
                title: '开通时间',
                dataIndex: 'creationTime',
                render: (text: any) => <span><Text type="secondary">{moment(text).format('YYYY-MM-DD HH:MM:SS')}</Text></span>
            },
            {
                title: '运行时长',
                dataIndex: 'runningtime',
                render: (text: any) => <span> <FieldTimeOutlined /> {text} s </span>
            },
            {
                title: '服务状态',
                dataIndex: 'status',
                render: (text: any, record: IPayServModel) =>
                    <span><StatusTag status={record.isEnable ? 3 : 2} /></span>
            },

            {
                render: (text: any, record: IPayServModel) =>
                    <span>
                        <a onClick={() => this.showDrawer(record)}>详细</a>
                    </span>
            },
        ];
        return (
            <PageHeaderWrapper>
                <Row gutter={[12, 12]}>
                    <Col span={24}>
                        <Card>
                            <Space>
                                <Button type="primary" onClick={this.fetchData} loading={loading}>刷新</Button>
                                <Button type="dashed" onClick={() => this.showDrawer()} icon={<PlusOutlined />}>新建实例</Button>
                                <Button type="primary" danger>暂停/启动</Button>
                                <span>
                                    {hasSelected ? `已选择 ${selectedRowKeys.length} 项` : ''}
                                </span>
                            </Space>

                        </Card>
                    </Col>
                    <Col span={24}>
                        <Table rowKey="id" rowSelection={rowSelection} columns={columns} dataSource={this.state.dataSource} />
                    </Col>
                </Row>
                <Drawer
                    title={record?.serviceName}
                    placement="right"
                    closable={false}
                    onClose={this.onClose}
                    visible={this.state.visible}
                    destroyOnClose={true}
                    width={650}
                >
                    <ServiceConfig model={record} refreshData={this.fetchData} closeDraw={this.onClose} />
                </Drawer>
            </PageHeaderWrapper >
        )
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(PayService);